<script>

import config from '@/components/FreeForm/minix/config'

export default {
  name: 'Depend',
  mixins: [config],
  data() {
    return {
      dependencies: []
    }
  },
  methods: {
    handleAppend() {
      this.dependencies.push({ name: '', value: '', operator: '=', logic: '&&' })
    },
    handleClear() {
      this.dependencies = []
    },
    handleSave() {
      this.attributes.dependencies = this.dependencies
      this.dynamicOnlineSave()
    }
  }
}
</script>

<template>
  <el-card shadow="never">
    <template v-slot:header>
      <el-button size="mini" type="text" @click="handleAppend">新增</el-button>
      <el-button size="mini" type="text" @click="handleClear">清空</el-button>
      <el-button size="mini" type="text" @click="handleSave">保存</el-button>
    </template>
    <div v-for="(dep,index) in dependencies" :key="index" class="dep">
      <el-row :gutter="5">
        <el-col :span="12">
          <el-input v-model="dep.name" size="small" placeholder="字段名称" />
        </el-col>
        <el-col :span="12">
          <el-input v-model="dep.value" size="small" placeholder="字段值" />
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 5px">
        <el-col :span="12">
          <el-select v-model="dep.operator" size="small" placeholder="operator">
            <el-option label="等于" value="=" />
            <el-option label="不等于" value="!=" />
            <el-option label="大于" value=">" />
            <el-option label="小于" value="<" />
            <el-option label="大于等于" value=">=" />
            <el-option label="小于等于" value="<=" />
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-select v-model="dep.logic" size="small" placeholder="logic">
            <el-option label="且" value="&&" />
            <el-option label="与" value="||" />
          </el-select>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
::v-deep .el-card__header{
  padding: 10px!important;
}

::v-deep .el-card__body{
  padding: 10px !important;
  padding-top: 5px!important;
}

.dep{
  border: 1px solid #eeeeee;
  border-radius: 4px;
  padding: 5px;
  margin-top: 5px;
}
</style>
